<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.stylea{
				height:200px;
				width:200px;
				background-color: pink;
			}
			.styleb{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="one" class="stylea"  style="color:red;background-color: blue;">
			<span>1111</span>
			<i>222</i>
		</div>
		
		
		
		
		<script>
			// var divone=document.getElementById("one");
			// console.log(divone.style);//对象---》只能获取行内样式
			// //获取样式---》行内样式  驼峰
			// console.log(divone.style.color);
			// console.log(divone.style.backgroundColor);
			
			// //修改样式---》行内样式 驼峰
			// divone.style.backgroundColor="aqua";
			// divone.style.fontSize="50px";
			
			// // //点击事件  元素.onclick=函数
			// divone.onclick=function(){
			// 	console.log("点击");
			// 	divone.style.backgroundColor="aqua";
			// 	divone.style.fontSize="50px";
			// }
			
			// //鼠标滑过事件---》背景颜色变成黄色
			// divone.onmouseover=function(){
			// 	divone.style.backgroundColor="yellow";
			// }
			// //鼠标离开事件---》背景颜色变成蓝色
			// divone.onmouseout=function(){
			// 	divone.style.backgroundColor="blue";
			// 	divone.style.fontSize="60px";
			// 	console.log(divone.style.fontSize);
			// }
			
		</script>
		<script>
			//DOM对象  ----》document对象
			//查找元素---》通过id 
			//var divone=document.getElementsByClassName("stylea")[0];//集合(多个)
			// var divone=document.getElementById("one");//一个元素
		 //    console.log(divone);//对象  普通输出
			// console.dir(divone);//对象  详细输出
			// //获取元素的属性  XXX.属性名 
			// console.log(divone.id);
			// //修改元素的属性  XXX.属性名=属性值
			// divone.id="two";
			
			// //获取元素的class 属性
			// console.log(divone.className);
			// //修改元素的class属性值 
			// divone.className="styleb";
			
			
			// var divone=document.getElementById("one");
			// // 获取元素的内容
			// console.log(divone.innerHTML);//元素的 HTML内容
			// console.log(divone.innerText);//元素的 文本内容
			
			// //修改元素的内容  XXX.innerHTML="XXX"
			// //divone.innerHTML="<h1>11aa22</h1>";//innerHTML 可以识别字符串里面的标签
			// divone.innerText="<h1>11aa22</h1>";//innerText 不能识别字符串里面的标签
		</script>
	</body>
</html>
